{% extends "base.tmpl" %}
{% block body %}
{# set enableHome true #}

    <section id="hero" data-speed="10" data-type="background">

      <section id="marketing-video">

        <div class="container" id="frame-video">
          <p class="text-center" data-loading-text="Loading...">
          <div class="flex-video widescreen">
            <div class="video-closebtn">&#x2716;</div>
            <iframe id="youtubevid" width="100%" height="390px" src="//www.youtube.com/embed/4cqyEhhL15Q?rel=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
          </div>
          </p>
        </div>
      </section>

      <div class="container">
        <div class="row" id="hero-section">
          <div class="col-md-5" id="box-left">
            <h1 class="hero-header-text large">Collaboration made easy.</h1>
            <h4 class="hero-tagline">Add real time collaboration features to your website today!
            </h4>
            <p>
              <a class="btn btn-primary btn-lg main-get-started scrollnav" href="#tryitout-section">Get Started</a>
            </p>
          </div>
          <div class="col-md-7" id="video-area">
            <img src="images/site-hero-image@2x.png" class="swap1 img-responsive"
          </div>
        </div>
      </div>
    </section>

    <div class="container">
      <section class="body-content" id="main-section" data-speed="4" data-type="background">
        <section class="row" id="tour">
          <h3 class="text-center">What is TogetherJS?</h3>
          <div class="col-xs-12 text-center">
            <p class="text-center" id="text-descrip">TogetherJS is a <strong>free</strong>, <strong>open source</strong> JavaScript library by <strong>Mozilla</strong> that adds collaboration features and tools to your website.  By adding TogetherJS to your site, your users can help each other out on a website in real time!
            </p>
          </div>
          <hr>
          <h3 class="text-center">Why use TogetherJS?</h3>
          <div class="col-xs-12 col-sm-4 why-connect-02">
            <img src="images/site-tour-why-create@2x.png" alt="create with connect" class="img-circle img-responsive why-section">
            <h4 class="text-center">Create together.</h4>
            <p class="text-center"> TogetherJS makes it easy for users on your site to collaborate in real time.</p>
          </div>
          <div class="col-xs-12 col-sm-4 why-connect-03">
            <img src="images/site-tour-why-web@2x.png" alt="built for the web icon" class="img-circle img-responsive why-section">
            <h4 class="text-center">Built for the web.</h4>
            <p class="text-center">TogetherJS is implemented in JavaScript; no software or plugins to install, and it's friendly with existing web pages, while still letting developers customize the experience.</p>
          </div>
          <div class="col-xs-12 col-sm-4 text-center why-connect-01">
            <img src="images/site-tour-why-moz@2x.png" alt="mozilla logo" class="img-circle img-responsive why-section">
            <h4 class="text-center">By someone you trust.</h4>
            <p class="text-center">TogetherJS is built and hosted by Mozilla, so you know it's safe to use.</p>
          </div>
          <div class="clearfix"></div>
          <hr>
          <h3 class="text-center">How does TogetherJS work?</h3>

          <div class="table-responsive">
            <table class="table" id="howto-table">
              <tbody>
                <tr class="howto-animation-01">
                  <td class="col-xs-6 col-sm-6" style="vertical-align:middle">
                    <h4 class="text-right">Add TogetherJS JavaScript and HTML to your site.</h4>
                    <p class="text-right smtextright">Just copy and paste TogetherJS's JS library and HTML snippet into your site or app to give it out-of-the-box collaboration tools and features.</p>
                  </td>
                  <td class="col-xs-6 col-sm-6">
                    <!-- FIREFOX FIX -->
                    <div style="position:relative;" class="imagearea">
                      <img src="images/togetherjs-how-01-addit-file-connecthtml.png" alt="..." class="img-responsive how-section-imganim-01">
                      <img src="images/togetherjs-how-01-addit-file-connectjs.png" alt="..." class="img-responsive how-section-imganim-02">
                      <img src="images/togetherjs-how-01-addit-btn-collaborate.png" alt="..." class="img-responsive how-section-imganim-03">
                      <p><img src="images/togetherjs-how-01-addit-noplus.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                </tr>
                <tr class="howto-animation-02">
                  <td class="col-xs-12 col-sm-6">
                    <div style="position:relative;" class="imagearea">
                      <img src="images/togetherjs-how-02-maindockpiece.png" alt="..." class="img-responsive how-section-dockplacement">
                      <img src="images/togetherjs-how-02-dock-btn-collaborate-pressed.png" alt="..." class="img-responsive how-section-btncollabpressed">
                      <img src="images/togetherjs-how-01-addit-btn-collaborate.png" alt="..." class="img-responsive how-section-btncollab">
                      <p><img src="images/togetherjs-how-02-dock.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                  <td class="col-xs-12 col-sm-6" style="vertical-align:middle">
                    <h4 class="text-left">Your site is now TogetherJS enabled.</h4>
                    <p class="text-left smtextleft">If your users want to collaborate with a friend, they can click the TogetherJS button on your site.</p>
                  </td>
                </tr>
                <tr class="howto-animation-03">
                  <td class="col-xs-12 col-sm-6" style="vertical-align:middle">
                    <h4 class="text-right">Your users can then collaborate in real time!</h4>
                    <p class="text-right smtextright">Your users can send a unique TogetherJS url to a friend.  When the friend opens the link, each user sees the same page and can interact with it together in real time.</p>
                  </td>
                  <td class="col-xs-12 col-sm-6">
                    <div style="position:relative;" class="imagearea">
                      <img src="images/togetherjs-how-03-cursor1.png" alt="..." class="img-responsive cursor-placement-01">
                      <img src="images/togetherjs-how-03-cursor2.png" alt="..." class="img-responsive cursor-placement-02">
                      <img src="images/togetherjs-how-03-cursor1.png" alt="..." class="img-responsive cursor-placement-03">
                      <img src="images/togetherjs-how-03-cursor2.png" alt="..." class="img-responsive cursor-placement-04">
                      <p><img src="images/togetherjs-how-03-collaborate.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="clearfix"></div>
          <div class="col-xs-12">
            <h4 class="text-center">Want to learn more about how it works?</h4>
            <p class="text-center">
              See how the technology architecture works <a href="docs/#technology-overview">here</a>.
            </p>
          </div>
        </section>

        <hr id="examples-section">

        <section class="row" id="examples">
          <h3 class="text-center">Try TogetherJS on these sample apps.</h3>
          <div class="col-xs-12 col-sm-4">
            <a data-toggle="modal" href="#example-todoapp"><img src="images/site-examples-todo.png" alt="to do app examples" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Grocery To Do app</h4>
            <p class="text-center ex-description">Try out TogetherJS on this sample grocery app with a friend.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-todoapp" class="btn btn-primary">Launch</button></p>
          </div>
          <!-- <div class="col-xs-4">
            <a data-toggle="modal" href="#example-friendlycode"><img src="images/site-examples-friendlycode.png" alt="friendly code example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Friendly Code</h4>
            <p class="text-center ex-description">Code together with your friend.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-friendlycode" class="btn btn-primary">Launch</button></p>
          </div> -->
          <div class="col-xs-12 col-sm-4">
            <a data-toggle="modal" href="#example-madlibs"><img src="images/site-examples-madlibs.png" alt="mad libs example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Mad Libs</h4>
            <p class="text-center ex-description">Play Mad Libs with a friend using TogetherJS.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-madlibs" class="btn btn-primary">Launch</button></p>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="/examples/drawing/" target="_blank"><img src="images/site-examples-drawing.png" alt="drawing example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Drawing</h4>
            <p class="text-center ex-description">Draw with a friend using TogetherJS.</p>
            <p class="text-center"><a href="/examples/drawing/" class="btn btn-primary" target="_blank">Launch</a></p>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="/examples/youtube/" target="_blank"><img src="images/site-examples-youtube.png" alt="youtube example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">YouTube</h4>
            <p class="text-center ex-description">Watch videos with a friend using TogetherJS.</p>
            <p class="text-center"><a href="/examples/youtube/" class="btn btn-primary" target="_blank">Launch</a></p>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="/examples/tinymce/" target="_blank"><img src="images/site-examples-tinymce.png" alt="youtube example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Writing</h4>
            <p class="text-center ex-description">Write with a friend using TogetherJS.</p>
            <p class="text-center"><a href="/examples/tinymce/" class="btn btn-primary" target="_blank">Launch</a></p>
          </div>
        </section>

        <!-- TO DO APP -->
         <div class="modal fade app-example" id="example-todoapp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
                 <div class="top-bar">
                   <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                   <button class="yellow-circle pull-left"></button>
                   <button class="green-circle pull-left"></button>
                 </div>
                 <div class="address-bar">
                  <input type="text" class="form-control" placeholder="http://example.com/todoapp" readonly>
                 </div>
               </div>
               <div class="modal-body">
                 <iframe class="col-xs-12 delay-open"
                          data-delay-src="examples/todo/index.html">
                 </iframe>
               </div>
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
         </div><!-- /.modal -->

        <!-- FRIENDLY CODE APP -->
        <div class="modal fade app-example" id="example-friendlycode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <div class="top-bar">
                  <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <button class="yellow-circle pull-left"></button>
                  <button class="green-circle pull-left"></button>
                </div>
                <div class="address-bar">
                 <input type="text" class="form-control" placeholder="http://example.com/friendlycode" readonly>
                </div>
              </div>
              <div class="modal-body">
                <iframe class="col-xs-12 delay-open"
                         data-delay-src="examples/friendlycode/index.html">
                </iframe>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

         <!-- MADLIBS APP -->
         <div class="modal fade app-example" id="example-madlibs" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
                 <div class="top-bar">
                   <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                   <button class="yellow-circle pull-left"></button>
                   <button class="green-circle pull-left"></button>
                 </div>
                 <div class="address-bar">
                  <input type="text" class="form-control" placeholder="http://example.com/madlibs" readonly>
                 </div>
               </div>
               <div class="modal-body">
                 <iframe class="col-xs-12 delay-open"
                          data-delay-src="examples/madlibs/index.html">
                 </iframe>
               </div>
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
         </div><!-- /.modal -->

        <hr id="customers-section">

        <section class="row" id="customers">
          <h3 class="text-center">Who is using TogetherJS?</h3>
          <p class="text-center">
            TogetherJS is for developers like you.  Whether if you have an <strong>education site</strong>, <strong>coding environment</strong> or <strong>CMS</strong>, TogetherJS can help your users collaborate in real time to accomplish their tasks and work together.
          </p>
          <div class="col-xs-12 col-sm-4">
            <a href="https://thimble.webmaker.org/" target="_blank">
              <img src="images/site-customers-thimble.png" alt="Thimble" class="img-responsive img-rounded">
            </a>
            <h4 class="text-center">Mozilla Thimble</h4>
            <p class="text-center">Log into Thimble, then click the 'Collaborate' button to start collaborating with a friend!</p>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="http://jsfiddle.net" target="_blank">
              <img src="images/site-customers-jsfiddle.png" alt="JSFiddle" class="img-responsive img-rounded">
            </a>
            <h4 class="text-center">JSFiddle</h4>
            <p class="text-center">Press Control + K on your keyboard to activate TogetherJS.</p>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="http://wordpress.org/plugins/tags/togetherjs" target="_blank">
              <img src="images/site-customers-wordpress.png" alt="Wordpress" class="img-responsive img-rounded">
            </a>
            <h4 class="text-center">WordPress Plugins</h4>
            <p class="text-center">Add a WordPress plugin to your site for real time multi-authoring.</p>
          </div>
          <div class="clearfix"></div>
          <div class="col-xs-12 col-sm-4">
            <a href="https://popcorn.webmaker.org/" target="_blank">
              <img src="images/site-customers-popcorn.png" alt="Popcorn" class="img-responsive img-rounded">
            </a>
            <h4 class="text-center">Mozilla Popcorn</h4>
            <p class="text-center">Log into Popcorn, then click the 'Collaborate' button to make a video with a friend!</p>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="http://dotnetfiddle.net/" target="_blank">
              <img src="images/site-customers-netfiddle.png" alt=".NET Fiddle" class="img-responsive img-rounded">
            </a>
            <h4 class="text-center">.NET Fiddle</h4>
            <p class="text-center">Code together with a friend in a real time authoring environment.</p>
          </div>
          <div class="clearfix"></div>
          <!-- <h3 class="text-center">Testimonials</h3>
          <p class="text-center">
            See what people are saying about ConnectJS.
          </p>
          <blockquote class="text-center">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>John Doe from <cite title="Source Title">JSFiddle</cite></small>
          </blockquote> -->
        </section>

        <hr id="features-section">

        <section class="row" id="features">
          <h3 class="text-center">Here are some built-in features!</h3>
          <div class="col-xs-12 col-sm-6">
            <ul class="media-list">
              <li class="media">
                <div class="pull-left">
                  <img class="media-object" src="images/site-features-audiovideo@2x.png" alt="audio video chat" class="img-responsive">
                </div>
                <div class="media-body">
                  <h4 class="media-heading">Audio chat</h4>
                  <p>TogetherJS uses Web RTC technology to enhance communication for your users.</p>
                </div>
              </li>
              <li class="media">
                <div class="pull-left">
                  <img class="media-object" src="images/site-features-user-focus@2x.png" alt="user focus" class="img-responsive">
                </div>
                <div class="media-body">
                  <h4 class="media-heading">User focus</h4>
                  <p>Your users see each other's mouse cursors and clicks.</p>
                </div>
              </li>
              <li class="media">
                <div class="pull-left">
                  <img class="media-object" src="images/site-features-user-presence@2x.png" alt="user presence" class="img-responsive">
                </div>
                <div class="media-body">
                  <h4 class="media-heading">User presence</h4>
                  <p>TogetherJS enables your users to see each other in real time.</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-xs-12 col-sm-6">
            <ul class="media-list">
              <li class="media">
                <div class="pull-left">
                  <img class="media-object" src="images/site-features-text-chat@2x.png" alt="text chat" class="img-responsive">
                </div>
                <div class="media-body">
                  <h4 class="media-heading">Text chat</h4>
                  <p>Your users can chat with each other with familiar instant messaging.</p>
                </div>
              </li>
              <li class="media">
                <div class="pull-left">
                  <img class="media-object" src="images/site-features-cobrowsing@2x.png" alt="co browsing" class="img-responsive">
                </div>
                <div class="media-body">
                  <h4 class="media-heading">Co-browsing</h4>
                  <p>Your users can follow each other to different pages on the same domain.</p>
                </div>
              </li>
              <li class="media">
                <div class="pull-left">
                  <img class="media-object" src="images/site-features-realtimesync@2x.png" alt="real time sync" class="img-responsive">
                </div>
                <div class="media-body">
                  <h4 class="media-heading">Real time content sync</h4>
                  <p>Your users can see content on a site or app dynamically change together.</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </section>

        <hr id="tryitout-section">

        <section class="row" id="tryitout">
          <h3 class="text-center">Try out TogetherJS today!</h3>
            <div class="col-xs-12 col-sm-5">
              <h4>Add the JavaScript snippet</h4>
              <p>Simply copy and paste the TogetherJS JavaScript snippet below into your site.</p>
            </div>
            <div class="col-xs-12 col-sm-7">
              <p><pre class="pre-scrollable text-center">&lt;script src="https://togetherjs.com/togetherjs-min.js"&gt;&lt;/script&gt;</pre></p>
            </div>
            <div class="clearfix"></div>
            <div class="col-xs-12 col-sm-5">
              <h4>Add the HTML button</h4>
              <p>After you've included the TogetherJS JavaScript snippet, copy and paste this anywhere onto your site!</p>
            </div>
            <div class="col-xs-12 col-sm-7">
              <p><pre class="pre-scrollable text-center">&lt;button onclick="TogetherJS(this); return false;"&gt;Start TogetherJS&lt;/button&gt;</pre></p>
            </div>
        </section>

        <script src="js/frontpage.js"></script>

{% endblock %}
